<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<body>
		<div id="app">
			<h2>消息提示</h2><br />
			<template>
				<el-button type="text" @click="open">点击打开 Message Box</el-button>
			</template>
		</div>

		<div id="app2">
			<h2>确认消息</h2><br />
			<template>
				<el-button type="text" @click="open">点击打开 Message Box</el-button>
			</template>
		</div>

		<div id="app3">
			<h2>提交内容</h2><br />
			<template>
				<el-button type="text" @click="open">点击打开 Message Box</el-button>
			</template>
		</div>
	</body>
	<script>
		var Main = {
			methods: {
				open() {
					this.$alert('这是一段内容', '标题名称', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
				}
			}
		}
		var Ctor = Vue.extend(Main);
		new Ctor().$mount('#app');

		var Main2 = {
			methods: {
				open() {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			}
		}
		var Ctor2 = Vue.extend(Main2);
		new Ctor2().$mount('#app2');

		var Main3 = {
			methods: {
				open() {
					this.$prompt('请输入邮箱', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						inputErrorMessage: '邮箱格式不正确'
					}).then(({
						value
					}) => {
						this.$message({
							type: 'success',
							message: '你的邮箱是: ' + value
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
				}
			}
		}
		var Ctor3 = Vue.extend(Main3);
		new Ctor3().$mount('#app3');
	</script>
</html>
